<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-window-maximize"></i>
      Open Metadata Center
    </h2>
    <p class="settings-description">
      Decide how you want to view book details — inline as a full page or in a pop-up dialog.
    </p>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">
                Display Mode
                <i class="pi pi-info-circle text-sky-600"
                   pTooltip="Choose whether to open the Metadata Center in the current page or as a popup dialog window."
                   tooltipPosition="right"
                   style="cursor: pointer;">
                </i>
              </label>
              <div class="radio-group">
                <div class="radio-option">
                  <p-radioButton name="viewMode"
                                 [value]="'route'"
                                 [(ngModel)]="viewMode"
                                 inputId="viewModeRoute"
                                 (onClick)="onViewModeChange('route')"></p-radioButton>
                  <label for="viewModeRoute">Route</label>
                </div>
                <div class="radio-option">
                  <p-radioButton name="viewMode"
                                 [value]="'dialog'"
                                 [(ngModel)]="viewMode"
                                 inputId="viewModeDialog"
                                 (onClick)="onViewModeChange('dialog')"></p-radioButton>
                  <label for="viewModeDialog">Dialog</label>
                </div>
              </div>
            </div>
            <p class="setting-description">
              Choose whether to open the Metadata Center in the current page or as a popup dialog window.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
